<template>
  <div style="height: auto">
    <br /><br /><br /><br /><br /><br />
    <div style="width: 600px; display: flex; margin-left: 20px">
      <el-input
        prefix-icon="el-icon-search"
        @input="search"
        v-model="page.message"
        placeholder="请输入标题或内容查找"
      ></el-input>
    </div>

    <el-empty
      v-if="noticeList.length == 0 ? true : false"
      description="暂无公告"
    ></el-empty>
    <!-- 公告展示板块开始 -->
    <div v-if="noticeList.length == 0 ? false : true">
      <div
        v-for="(item, index) in noticeList"
        :key="index"
        style="width: 360px; display: inline-block; margin: 20px 20px"
      >
        <el-card style="color: #3f4b4b; height: 400px">
          <div slot="header">
            <span
              v-html="item.title"
              style="font-size: 18px; font-weight: 600"
            ></span><br>
            <span
              style="color: #6e7474; font-size: smaller"
              >{{ item.time }}</span
            >
          </div>
          <div v-html="item.content" style="text-indent: 2em"></div>
        </el-card>
      </div>
      <!-- 分页开始 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[9, 21, 27, 36]"
          :page-size="page.pageSize"
          layout="total, prev, pager, next, sizes"
          :total="page.total"
        >
        </el-pagination>
      </div>
      <!-- 分页结束 -->
    </div>
    <!-- 公告展示板块结束 -->
  </div>
</template>
      
<script>
import { getNotices } from "../api/noticeMG";
export default {
  name: "NoticeView",
  data() {
    return {
      page: {
        currentPage: 1, //当前页是第几页
        pageSize: 9, //每页最多多少条
        total: 0, //总共多少条
        message: "", //查询的标题或内容
      },

      noticeList: [],
    };
  },
  methods: {
    search() {
      //点击搜索
      this.page.currentPage = 1;
      this.getList();
    },
    getList() {
      getNotices(this.page).then((res) => {
        if (res.data.code == 200) {
          if (this.page.message != "") {
            // this.$message.success(res.data.msg)
            //这里看看能不能把输入的字变红,就是说把res里面的那个公告数据中与输入的条件相同字符替换一下
            res.data.data.list.forEach((element) => {
              let parts1 = element.content.split(this.page.message);
              element.content = parts1.join(
                "<span style='color:red;'>" + this.page.message + "</span>"
              );
              let parts2 = element.title.split(this.page.message);
              element.title = parts2.join(
                "<span style='color:red;'>" + this.page.message + "</span>"
              );
            });
          }

          this.noticeList = res.data.data.list;
          // res.data.data.list.total这个是一共多少页
          this.page.total = res.data.data.total; //复制给list
        } else {
          this.$message.error(res.data.code + "::" + res.data.msg);
        }
      });
    },
    handleSizeChange(pageSize) {
      //改变每页尺寸触发事件
      this.page.pageSize = pageSize;
      this.getList();
    },
    handleCurrentChange(currentPage) {
      //改变当前页也会触发事件
      this.page.currentPage = currentPage;
      this.getList();
    },
  },
  mounted() {
    //这里一来应该直接查询
    this.getList();
  },
};
</script>
      
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
</style>
      